<template>
  <div class="Video test-1">
    <div class="Video-one">
      <div class="text-daohang">
        <div class="aaa">
          <van-icon class="qqqqq" name="arrow-left" @click="tui" /> MV详情
        </div>
      </div>
      <video class="auto-video" :src="Videoshuju" controls autoplay></video>
      <div class="text-jiesao">{{ MVdate.name }}</div>
      <div class="text-shijian">
        发布：{{ MVdate.publishTime }} &nbsp;&nbsp; 播放：{{
          MVdate.shareCount
        }}
      </div>
    </div>
    <div class="Video-two">
      <div class="Video-two-text">相似推荐：</div>
      <div
        class="two-kuan"
        v-for="(item, index) in recommendshuju"
        :key="index"
        @click="recommendshijian(item.id)"
      >
        <div class="two-img">
          <img :src="item.cover" alt="" />
        </div>
        <div class="two-text-kuan">
          <div class="text-one">{{ item.name }}</div>
          <div class="text-two">{{ item.artistName }}</div>
        </div>
      </div>
    </div>
    <div class="clear"></div>
    <div class="comment">
      <div class="comment-text">最新评论：</div>
      <div
        class="comment-kuan"
        v-for="(item, index) in commentshuju"
        :key="index"
      >
        <div class="comment-img">
          <img :src="item.user.avatarUrl" alt="" />
        </div>
        <div class="comment-text">
          <span class="aaaa">{{ item.user.nickname }}：</span>&nbsp;&nbsp;{{
            item.content
          }}
        </div>
        <div class="comment-shijian">
          <div class="comment-shijian-one">{{ item.timeStr }}</div>
          <div class="comment-shijian-two" @click="more">
            <van-icon name="more-o" />
          </div>
          <div class="comment-shijian-two" @click="good">
            <van-icon name="good-job-o" />
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Video",
  data() {
    return {
      id: "",
      MVdate: [],
      Videoshuju: "",
      commentshuju: [],
      recommendshuju: [],
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.Videoqingqiu();
    this.comment();
    this.recommend();
    this.MVdata();
  },
  methods: {
    more() {
      Toast("暂未开发");
    },
    good() {
      Toast("点赞成功");
    },
    tui() {
      this.$router.go(-1);
    },
    //推荐事件
    recommendshijian(id) {
      this.id = id;
      this.Videoqingqiu();
      this.comment();
      this.recommend();
      this.MVdata();
    },
    //视频地址
    Videoqingqiu() {
      this.axios({
        method: "get",
        url: "/mv/url?id=" + this.id,
      })
        .then((result) => {
          // console.log("result==>", result);
          this.Videoshuju = result.data.data.url;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    //评论
    comment() {
      this.axios({
        method: "get",
        url: "/comment/mv?id=" + this.id,
      })
        .then((result) => {
          // console.log("result=1=>", result);
          this.commentshuju = result.data.comments;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    //推荐
    recommend() {
      this.axios({
        method: "get",
        url: "/simi/mv?mvid=" + this.id,
      })
        .then((result) => {
          console.log("result=2=>", result);
          this.recommendshuju = result.data.mvs;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    //获取 mv 数据
    MVdata() {
      this.axios({
        method: "get",
        url: "/mv/detail?mvid=" + this.id,
      })
        .then((result) => {
          // console.log("result=3=>", result);
          this.MVdate = result.data.data;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.qqqqq {
  cursor: pointer;
}
.aaaa {
  color: rgb(0, 162, 255);
  cursor: pointer;
}
.aaaa:hover {
  color: rgb(0, 132, 209);
}
.test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  // border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #b3b3b3;
}
.test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // border-radius: 10px;
  background: #ededed;
}
.clear {
  clear: both;
  width: 100%;
  height: 1px;
}
.Video {
  width: 712.5px;
  height: 500px;
  overflow-y: scroll;
  .Video-one {
    width: 480px;
    height: 380px;
    padding: 10px;
    float: left;
    .auto-video {
      width: 100%;
      height: 280px;
    }
    .text-jiesao {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .text-shijian {
      width: 100%;
      height: 25px;
      line-height: 25px;
      font-size: 12px;
      color: #8a8a8a;
    }
    .text-daohang {
      width: 100%;
      height: 25px;
      line-height: 25px;
      color: #414141;
      font-size: 13px;
      .aaa {
        width: 100px;
      }
    }
  }
  .Video-two {
    width: 207.5px;
    height: 400px;
    float: left;
    .Video-two-text {
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 13px;
    }
    .two-kuan {
      width: calc(100% - 6px);
      height: 60px;
      padding: 3px;
      cursor: pointer;
      .two-img {
        width: 49%;
        height: 60px;
        float: left;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }
      .two-text-kuan {
        width: 49%;
        height: 60px;
        float: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .text-one {
          width: 100%;
          height: 25px;
          font-size: 11px;
          line-height: 25px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .text-two {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 9px;
          color: #b6b6b6;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .comment {
    width: calc(100% - 20px);
    padding: 10px;
    .comment-text {
      width: 100%;
      height: 15px;
      line-height: 15px;
    }
    .comment-kuan {
      width: 100%;
      padding: 10px 0;
      border-bottom: 1px solid rgb(228, 228, 228);
      .comment-img {
        width: 35px;
        height: 35px;
        float: left;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .comment-text {
        width: calc(94% - 10px);
        height: 100%;
        float: right;
        padding-right: 10px;
        word-break: break-all;
      }
      .comment-shijian {
        width: calc(94% - 10px);
        height: 20px;
        line-height: 20px;
        padding-right: 10px;
        float: right;
        color: #7e7e7e;
        .comment-shijian-one {
          width: 100px;
          height: 20px;
          float: left;
        }
        .comment-shijian-two {
          width: 20px;
          height: 20px;
          float: right;
          text-align: center;
          font-size: 11px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>